<template>
    <div class="container">
        <div class="opt-area-02">
            <div class="left-con" v-if="companyType == 1">
                总数: <span>{{countData.totalNum}} 条</span> |
                提交: <span>{{countData.tjnum}} 条</span> |
                交接: <span>{{countData.jjnum}} 条</span> |
                暂存: <span>{{countData.zcnum}} 条</span> |
                驳回: <span>{{countData.bhnum}} 条</span>
            </div>
            <div class="right-con">
                <div class="input-frame">
                    <Select v-model="params.state" clearable @on-change="selectlist" placeholder="请选择类型">
                        <Option value="1">暂存</Option>
                        <Option value="2">已提交</Option>
                        <Option value="3">交接完毕</Option>
                        <Option value="4">已驳回</Option>
                        <Option value="10">未提交</Option>
                    </Select>
                </div>
                <div class="input-frame">
                    <Select v-model="params.gong_an_comparison" @on-change="selectlist" clearable placeholder="请选择比对状态">
                        <Option value="2">正确</Option>
                        <Option value="3">错误</Option>
                        <Option value="1">未比对</Option>
                    </Select>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist" @on-click="selectlist()" placeholder="请输入档案号"
                           v-model="params.recode_no"
                           icon="ios-search"/>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist" @on-click="selectlist()" placeholder="请输入姓名"
                           v-model="params.name"
                           icon="ios-search"/>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist" @on-click="selectlist()" placeholder="请输入身份证号"
                           v-model="params.id_card"
                           icon="ios-search"/>
                </div>
                <div class="input-frame">
                    <Input type="text" @on-enter="selectlist" @on-click="selectlist()" placeholder="机构编号"
                           v-model="params.company_code"
                           icon="ios-search"/>
                </div>
            </div>
        </div>
        <Row class="btn-action">
            <Col span="24">
                <Button v-has="'DA_danganchuansong'" type="primary" class="mp10" @click="chuanSongAction">档案转送</Button>
                <Button v-has="'DA_xinzengshuju'" type="primary" class="mp10" @click="addAction">新增数据</Button>
                <Button v-has="'DA_shujudaoru'" type="primary" class="mp10" @click="importExcel">数据导入</Button>
                <Button v-has="'DA_duorendaoru'" type="primary" class="mp10" @click="importExcelAll">多人材料导入</Button>
                <Tooltip :content="excelBtnDescribe" placement="bottom-start" v-if="false" max-width="400">
                    <Icon type="md-help-circle" class="excel-help"/>
                </Tooltip>
            </Col>
        </Row>
        <vxe-toolbar custom></vxe-toolbar>
        <vxe-table
                border
                resizable
                highlight-hover-row
                export-config
                size="medium"
                :loading="countData.loading"
                align="center"
                header-align="center"
                :sort-config="{trigger: 'cell'}"
                :data="fcDataList"
                @checkbox-change="selectList"
                @checkbox-all="selectListAll"
                :checkbox-config="{strict: true,checkMethod: checkMethod}">
            <vxe-table-column type="checkbox" width="60" fixed="left"></vxe-table-column>
            <vxe-table-column field="state" title="比对状态" width="150" fixed="left">
                <template v-slot:header="{ column }">
                    <span>{{ column.title }}</span>
                    <Tooltip :content="compareContent" theme="light" :transfer="true">
                        <Icon type="md-help-circle"/>
                    </Tooltip>
                </template>
                <template slot-scope="{ row }">
                    <div style="color: green" v-if="row.gong_an_comparison == '2'">正确</div>
                    <div style="color: red" v-if="row.gong_an_comparison == '3'">错误</div>
                    <div style="color: gray" v-if="row.gong_an_comparison != '2' && row.gong_an_comparison != '3'">未比对
                    </div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="recode_no" title="档号" width="150" sortable></vxe-table-column>
            <vxe-table-column field="name" title="姓名" width="150"></vxe-table-column>
            <vxe-table-column field="idcard" width="180" title="身份证号"></vxe-table-column>
            <vxe-table-column field="sex" title="性别" width="140">
                <template slot-scope="{ row }">
                    <div v-if="row.sex == '0'">男</div>
                    <div v-if="row.sex == '1'">女</div>
                </template>
            </vxe-table-column>
            <vxe-table-column field="nation" title="民族" width="120"></vxe-table-column>
            <vxe-table-column field="company_code" title="机构编号" width="120"></vxe-table-column>
            <vxe-table-column field="office_name" title="机构名称" width="120"></vxe-table-column>
            <vxe-table-column field="manager_recode_no" title="档案交接号" width="120"></vxe-table-column>
            <vxe-table-column field="accept_company_code" title="交接单位" width="120"></vxe-table-column>
            <vxe-table-column field="accept_login_no" title="交接账号" width="120"></vxe-table-column>
            <vxe-table-column field="accept_login_name" title="交接用户" width="150"></vxe-table-column>
            <vxe-table-column field="serial_number" title="流水号" width="120"></vxe-table-column>
            <vxe-table-column field="img_total" title="总页数" width="120"></vxe-table-column>
            <vxe-table-column field="img_explain" title="图片说明材料" width="120">
                <template v-slot="{ row }">
                    <Button @click="imgShow(row)" v-if="row.img_explain">图片预览</Button>
                    <span v-else>无</span>
                </template>
            </vxe-table-column>
            <vxe-table-column field="remark" title="备注信息" width="120"></vxe-table-column>
            <vxe-table-column field="action" title="操作" width="150" fixed="right">
                <template slot-scope="{ row }">
                    <Button v-has="'CL_manager'" class="table-action-btn" type="info" size="small"
                            @click="materialAction(row)">
                        材料管理
                    </Button>
                    <Button v-has="'list_edit'"
                            v-if="row.state == 1 || row.state == 4 || (row.state == 3 && companyType == 2) "
                            class="table-action-btn" type="success" size="small"
                            @click="editAction(row)">编辑
                    </Button>
                    <Button v-has="'list_delete'" v-if="row.state == 1 || row.state == 4" type="error" size="small" style="margin-right: 3px"
                            @click="delAction(row)">删除
                    </Button>
                    <Button v-has="'list_delete'" v-if="row.state == 1 || row.state == 4" type="warning" size="small"
                            @click="changeLiuShui(row)">改流水
                    </Button>
                </template>
            </vxe-table-column>
        </vxe-table>
        <vxe-modal v-model="showDetails" title="查看详情" width="800" height="500" resize>
            <template v-slot>
                <Carousel v-if="selectRow.img_explain">
                    <CarouselItem v-for="(item, index) in showImgList" :key="index">
                        <div style="width: 100%;display: flex;align-items: center;justify-content: center">
                            <div style="width: 400px">
                                <img :src="item" style="width: 100%">
                            </div>
                        </div>
                    </CarouselItem>
                </Carousel>
            </template>
        </vxe-modal>
        <Row type="flex" justify="end" class="page_style">
            <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize"
                  show-total :page-size-opts="[10, 50, 100, 200, 500]"
                  @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
        <option-modal ref="optionModal" :modal-title="modalTitle" :modal-show="modalShow" :modal-type="modalType"
                      :dataObj="modalData" @cancelOption="cancelOption" @saveOption="saveOption"></option-modal>
        <turn-people-model ref="turnPeopleModel" :options="selection" @clean="clean"></turn-people-model>
        <rn-option-modal :modalShow="rnOptionModalShow" :modal-width="400"></rn-option-modal>
    </div>
</template>

<script>
import TurnPeopleModel from './components/turn-people-model/index'
import { saveAndUpdateUser, recordList, getRecordNum, updateSerialNumber } from '@/api/record'
import OptionModal from './components/option-modal/index'
import RnOptionModal from '@/components/rn-option-modal/index'

export default {
  components: { RnOptionModal, OptionModal, TurnPeopleModel },
  computed: {
    companyType () {
      return window.localStorage.getItem('company_type')
    }
  },
  data () {
    return {
      showImgList: [],
      showDetails: false,
      row: {},
      selectRow: '',
      countData: { loading: true, totalNum: 0, tjnum: 0, zcnum: 0, jjnum: 0, bhnum: 0 },
      params: { name: '', type: '', pageNo: 1, pageSize: 10, totalRecord: 0, state: '' },
      fcDataList: [],
      selection: [],
      modalShow: false,
      modalTitle: '',
      modalType: '',
      modalData: {},
      excelBtnDisabled: true,
      excelBtnDescribe: '仅在无数据时开启，若导入数据请先删除全部数据',
      rnOptionModalShow: false,
      compareContent: '姓名、身份证号与公安库比对后结果',
      value: ''
    }
  },
  methods: {
    imgShow (row) {
      this.showImgList = row.img_explain.split(',')
      this.showDetails = true
      this.selectRow = row
      console.log(this.selectRow.img_explain)
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    },
    cancelOption () {
      this.modalShow = false
    },
    saveOption () {
      this.modalShow = false
      this.getList()
    },
    addAction () {
      this.modalTitle = '添加'
      this.modalType = 'add'
      this.modalData = {}
      this.modalShow = true
    },
    editAction (val) {
      this.modalTitle = '编辑'
      this.modalType = 'edit'
      this.modalData = this.$common.xeUtils.clone(val)
      this.modalShow = true
    },
    getRecordNum () {
      getRecordNum().then(ret => {
        if (ret.data.errcode === 0) {
          this.countData.totalNum = ret.data.data.totalNum
          this.countData.tjnum = ret.data.data.tjNum
          this.countData.zcnum = ret.data.data.zcNum
          this.countData.zjnum = ret.data.data.zjNum
          this.countData.bhnum = ret.data.data.bhNum
          this.countData.jjnum = ret.data.data.jjNum
        }
      })
    },
    clean () {
      this.selection = []
      this.getList()
    },
    selectList ({ records }) {
      this.selection = records
    },
    selectListAll ({ records }) {
      this.selection = records
    },
    checkMethod ({ row }) {
      return row.state === '1' || row.state === '4'
    },
    pageAction (page) {
      this.params.pageNo = page
      this.getList()
    },
    selectlist () {
      this.params.pageNo = 1
      this.getList()
    },
    getList () {
      this.params.state = this.$common.xeUtils.trim(this.params.state)
      this.params.name = this.$common.xeUtils.trim(this.params.name)
      this.params.id_card = this.$common.xeUtils.trim(this.params.id_card)
      this.params.recode_no = this.$common.xeUtils.trim(this.params.recode_no)
      this.params.gong_an_comparison = this.$common.xeUtils.trim(this.params.gong_an_comparison)
      this.countData.loading = true
      recordList(this.params).then(res => {
        let result = res.data.data
        if (res.data.errcode === 0 || res.data.errcode === 1001) {
          this.getRecordNum()
          this.fcDataList = res.data.data.results
          this.fcDataList.forEach(item => {
            if (item.state !== '1' && item.state !== '4') {
              item['_disabled'] = true
            }
          })
          this.excelBtnDisabled = this.fcDataList.length > 0
          this.params.pageNo = result.pageNo
          this.params.pageSize = result.pageSize
          this.params.totalPage = result.totalPage
          this.params.totalRecord = result.totalRecord
          this.countData.loading = false
        } else {
          this.countData.loading = false
        }
      })
    },
    delAction (row) {
      this.$Modal.confirm({
        title: '确认删除此档案信息吗？',
        content: '删除后不可恢复，请确认后再操作！',
        loading: true,
        onOk: () => {
          this.deleteOne(row.id)
        }
      })
    },
    deleteOne (val) {
      saveAndUpdateUser({ id: val, del_flag: 1, type: 'edit' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.getList()
          this.success('删除成功')
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    // 旧版跳转（作废）
    showdetail (row, what) {
      if (what === 'recordMaterials') {
        this.$router.push({ name: 'recordMaterials', query: { id: row.id } })
      } else {
        this.$router.push({ path: '/record/add', query: { id: row.id, what: what } })
      }
    },
    // 材料管理操作
    materialAction (row) {
      if (row.record_number) {
        this.$router.push({ name: 'recordMaterials', query: { id: row.id } })
      } else {
        this.$Message.warning('缺少全宗号！')
      }
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.selectlist(this.params.pageNo)
    },
    chuanSongAction () {
      if (this.selection.length === 0) {
        this.$Message.warning('请选择档案！')
      } else {
        this.$refs.turnPeopleModel.modelAction()
      }
    },
    importExcel () {
      this.$router.push({
        name: 'recordExcel',
        query: { type: 'record' }
      })
    },
    importExcelAll () {
      this.$router.push({
        name: 'recordExcel',
        query: { type: 'all' }
      })
    },
    changeLiuShui (row) {
      this.$Modal.confirm({
        render: (h) => {
          return h('Input', {
            props: {
              value: this.value,
              autofocus: true,
              placeholder: '输入流水号'
            },
            on: {
              input: (val) => {
                this.value = val
              }
            }
          })
        },
        onOk: () => {
          updateSerialNumber({ id: row.id, num: this.value }).then(ret => {
            let result = ret.data
            if (result.errcode === 0) {
              this.getList()
              this.$Message.success('更新成功')
            } else {
              this.$Message.error('更新失败')
            }
          })
        }
      })
    }
  },
  mounted () {
    const RN = window.localStorage.getItem('record_number').trim()
    if (!RN || RN === 'undefined' || RN === 'null') {
      this.rnOptionModalShow = true
    } else {
      this.selectlist()
    }
  }
}
</script>

<style scoped>

    .excel-help {
        margin-right: 10px;
        color: orange;
        cursor: pointer;
    }

    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container {
        margin-bottom: 50px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
</style>
